<template>
  <div>
    <CustomDialog
      title="新增/编辑租户"
      width="550px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">租户信息</div>
        <!-- 租户类型名称 -->
        <el-form-item label="" prop="customerName" class="row-all">
          <template #label>
            <div class="form-label required">租户类型名称</div>
          </template>
          <el-input v-model="form.customerName" placeholder="请输入租户类型名称"></el-input>
        </el-form-item>
        <!-- 租户类型 -->
        <el-form-item label="" prop="customerType" class="row-all">
          <template #label>
            <div class="form-label required">租户类型</div>
          </template>
          <el-select v-model="form.customerType" class="w-full">
            <el-option
              v-for="item in customerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
import { customerTypeOptions } from '@/components/admin/manage/carrier/common/dictionary'
import { getCustomerTypeDetail, upsertCustomerTypeMenu } from '@/api/customerType'
export default Vue.extend({
  components: {
    CustomDialog,
  },

  data() {
    return {
      form: {
        customerName: '',
        customerType: 1,
      },
      rules: {
        customerName: [
          { required: true, message: '请输入租户类型名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        customerType: [{ required: true, message: '请选择租户类型', trigger: 'change' }],
      },
      id: '',
      type: 1,
      isShowDialog: false,
      loading: false,
      customerTypeOptions,
    }
  },

  watch: {
    'form.customerType'(val) {
      const obj = this.customerTypeOptions?.find((o) => o.value === val)
      this.form.customerTypeLabel = obj?.label
    },
  },

  methods: {
    open(type: number = 1, id?: string) {
      this.type = type
      this.isShowDialog = true

      if (type === 2 && id) {
        this.getDetail(id)
      }
    },
    async getDetail(id: string) {
      this.loading = true
      const result = await getCustomerTypeDetail(id)
      this.id = id
      this.initForm(result)
      this.loading = false
    },

    initForm(data: any) {
      const { form } = this as any
      Object.keys(form).forEach((key) => {
        const value = data[key]
        if (value) {
          form[key] = value
        }
      })
    },

    handleOk() {
      const { type, form, id } = this as any
      // @ts-ignore
      this.$refs.ruleForm.validate(async (valid: boolean) => {
        if (valid) {
          // @ts-ignore
          this.loading = true

          const params = {
            customerName: form.customerName,
            customerType: form.customerType,
          }

          if (type === 2) {
            params.id = id
          }
          await upsertCustomerTypeMenu(params)
          // @ts-ignore
          this.loading = false
          // @ts-ignore
          this.isShowDialog = false
          // @ts-ignore
          this.$emit('onRefresh')
        }
      })
    },

    handleCloseDialog() {
      this.$refs.ruleForm?.resetFields()
    },
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
